import React, { useState } from "react";
import {
  Box,
  Typography,
  Rating,
  Card,
  CardContent,
  Button,
  Grid
} from "@mui/material";
import theme from "../themes/theme ";
import {  ThemeProvider, CssBaseline } from "@mui/material";
// 假设问卷数据由后端获取
const mockSurvey = {
  id: 101,
  title: "模型维度评估问卷",
  dimensions: [
    { id: 1, name: "准确性" },
    { id: 2, name: "稳定性" },
    { id: 3, name: "可扩展性" },
    { id: 4, name: "可解释性" }
  ]
};

const SurveyAnswerPage: React.FC = () => {
  const [scores, setScores] = useState<Record<number, number | null>>({});

  const handleRatingChange = (dimId: number, value: number | null) => {
    setScores((prev) => ({
      ...prev,
      [dimId]: value
    }));
  };

  const handleSubmit = () => {
    const answerPayload = {
      surveyId: mockSurvey.id,
      answers: mockSurvey.dimensions.map((dim) => ({
        dimensionId: dim.id,
        score: scores[dim.id] ?? null
      }))
    };

    console.log("提交的答卷：", answerPayload);
    // TODO: 发送给后端 API
  };

  return (
    <ThemeProvider theme={theme}>
         <CssBaseline />
    <Box p={4}>
      <Typography variant="h4" gutterBottom>
        {mockSurvey.title}
      </Typography>

      <Typography variant="subtitle1" color="text.secondary" mb={3}>
        请根据以下维度对模型进行评分：
      </Typography>

      {mockSurvey.dimensions.map((dim) => (
        <Card key={dim.id} sx={{ mb: 2 }}>
          <CardContent>
            <Grid container alignItems="center" spacing={2}>
              <Grid item xs={6}>
                <Typography>{dim.name}</Typography>
              </Grid>
              <Grid item xs={6}>
                <Rating
                  value={scores[dim.id] ?? null}
                  onChange={(_, newValue) =>
                    handleRatingChange(dim.id, newValue)
                  }
                />
              </Grid>
            </Grid>
          </CardContent>
        </Card>
      ))}

      <Button
        variant="contained"
        color="primary"
        onClick={handleSubmit}
        disabled={Object.keys(scores).length < mockSurvey.dimensions.length}
      >
        提交答卷
      </Button>
    </Box>
    </ThemeProvider>
  );
};

export default SurveyAnswerPage;
